<template>
  <div>
    <my-container :title="Info.id?'编辑企业':'添加企业'">
      <el-form ref="form" :model="Info" label-width="140px" :rules="rules">
        <info-wrapper title="企业信息">
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业名称" prop="name">
                <el-input
                  v-model="Info.name"
                  placeholder="请输入企业名称"
                /> </el-form-item></el-col>
            <el-col :span="12">
              <el-form-item label="法人" prop="legalPerson">
                <el-input v-model="Info.legalPerson" placeholder="请输入法人" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="注册地址" prop="registeredAddress">
                <el-input
                  v-model="Info.registeredAddress"
                  placeholder="请输入注册地址"
                /> </el-form-item></el-col>
            <el-col :span="12">
              <el-form-item label="所在行业" prop="industryCode">
                <el-select
                  v-model="Info.industryCode"
                  placeholder="请选择所在行业"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in industryList"
                    :key="item.industryCode"
                    :label="item.industryName"
                    :value="item.industryCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="营业执照" prop="businessLicenseUrl">
                <!-- 上传的组件 -->
                <upload
                  :file-array="fileArray"
                  :file-size="5"
                  type="businessLicense"
                  tip-content="支持扩展名：.png .jpg .jpeg，文件大小不得超过5M"
                  :file-list="fileList"
                  @onSuccess="handlerSuccess"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </info-wrapper>
        <info-wrapper title="联系人信息">
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业联系人" prop="contact">
                <el-input
                  v-model="Info.contact"
                  placeholder="请输入企业联系人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="contactNumber">
                <el-input
                  v-model="Info.contactNumber"
                  placeholder="请输入联系电话"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </info-wrapper>
      </el-form>
      <template #footer>
        <div class="btn-container">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </template>
    </my-container>
  </div>
</template>

<script>
import MyContainer from '@/components/my-container'
import InfoWrapper from '@/components/info-wrapper.vue'
import { addEpAPI, getEpDetailAPI, getIndustryListAPI, updateEpAPI } from '@/api/enterprise'
import Upload from '@/views/Park/Enterprise/components/upload.vue'

export default {
  components: {
    MyContainer,
    InfoWrapper,
    Upload
  },
  data() {
    return {
      fileArray: ['png', 'jpg', 'jpeg'],
      industryList: [],
      Info: {
        name: '',
        legalPerson: '',
        registeredAddress: '',
        industryCode: null,
        businessLicenseUrl: '',
        businessLicenseId: 0,
        contact: '',
        contactNumber: ''
      },
      rules: {
        name: [{ required: true, message: ' ', trigger: 'blur' }],
        legalPerson: [{ required: true, message: ' ', trigger: 'blur' }],
        registeredAddress: [{ required: true, message: ' ', trigger: 'blur' }],
        industryCode: [{ required: true, message: ' ', trigger: 'blur' }],
        businessLicenseUrl: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        contact: [{ required: true, message: ' ', trigger: 'blur' }],
        contactNumber: [{ required: true, message: ' ', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }]
      },
      fileList: []
    }
  },
  watch: {
    'Info.businessLicenseUrl'(newVal, oldVal) {
      if (newVal !== oldVal && newVal !== '') {
        this.$refs.form.clearValidate(['businessLicenseUrl'])
      }
    }
  },
  created() {
    this.getIndustry()
    const { mode, id } = this.$route.query
    this.Info.id = id
    if (mode === 'edit' && id) {
      this.getInfo(id)
    }
  },
  methods: {
    async  getInfo(id) {
      const res = await getEpDetailAPI(id)
      this.fileList.push({ name: res.businessLicenseName, url: res.businessLicenseUrl })
      for (const key in this.Info) {
        this.Info[key] = res[key]
      }
    },
    onSubmit() {
      this.$refs.form.validate(async isOk => {
        if (isOk) {
          if (this.Info.id) {
            await updateEpAPI(this.Info)
            this.$message.success('操作成功!')
          } else {
            // 调用接口
            await addEpAPI(this.Info)
            // 提示用户
            this.$message.success('添加成功！')
          }
          // 清空表单
          this.resetForm()
          // 返回
          this.$router.go(-1)
        }
      })
    },
    async getIndustry() {
      const res = await getIndustryListAPI()
      this.industryList = res
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    handlerSuccess(res) {
      this.Info.businessLicenseId = res.id
      this.Info.businessLicenseUrl = res.url
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
